<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>电影购票系统</title>
  <meta name="HandheldFriendly" content="true">
  <meta name="format-detection" content="email=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta http-equiv="cleartype" content="yes">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">

  <meta name="HandheldFriendly" content="true">
  <meta name="format-detection" content="email=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="./css/main.css">


  <style>
  </style>
<meta name="lx:autopv" content="off"><meta name="lx:appnm" content="movie"><meta name="lx:category" content="movie"></head>
<body>


<%@include file="./common/header.jsp" %>
<div class="header-placeholder"></div>

    <div class="container" id="app">
<div class="content">
 
  <%@include file="./common/aside.jsp" %>
  
  <div class="main">
    <div class="movie-grid">
  <div class="panel">
    <div class="panel-header">
      <span class="panel-more">
       
      </span>
      <span class="panel-title">
        <span class="textcolor_red">电影票在线订购</span>
      </span>
    </div>
    <style>
    	.box1 {height:380px;}
    	.box1 .fengmian {width:280px;height:100%;float:left;}
    	.box1 .product {width:420px;height:100%;float:left;padding-left:20px;}
    	.box1 .product .item {clolr:#666;margin:10px;}
    	.btn.buy {
		    margin-top: 60px;
		    width: 250px;
		    height: 40px;
		    font-size: 16px;
		    line-height: 40px;
		    text-align: center;
		    border-radius: 2px;
		    padding: 0;
		    float:right;
		}
		.seat {text-align:center;cursor:pointer;margin: 15px;width:40px;padding:10px 20px;background:#eaeaea;border:1px solid #666;float:left;border-radius:20px;}
		.seat2 {background:red !important;color:#fff;text-align:center;cursor:pointer;margin: 15px;width:40px;padding:10px 20px;background:#eaeaea;border:1px solid #666;float:left;border-radius:20px;}
    	.seat:hover {background:pink;}
    </style>
    <div class="panel-content">
    	
    	<div class='box1'>
    		<div class='fengmian'>
    			<img style='width:100%;' src="${movie.imgpath }">
    		</div>
    		<div class='product'>
    			<h2>${movie.moviename }</h2>
    			<div class='item'>导演：${movie.director }</div>
    			<div class='item'>时长：${movie.time }</div>
    			<div class='item'>上映日期：${movie.publishdate }</div>
    			<div class='item'>电影票房：${movie.boxoffice }</div>
    			<div class='item'>电影简介：${movie.description }</div>
    			<div class='item'>票价：<span style="color:red;font-size:30px;">${movie.ticketprice }</span></div>
    		</div>
    	</div>
    	
    	<div>
    		<a class="btn buy" href="javascript:showSeats()" target="_blank">特惠购票（点击座位购票）</a>
    		
    		<div style="clear:both;height:80px;"></div>
    	</div>
    	
    	<div id='seats'>
    		<c:forEach items="${tickets}" var="item"> 
    		
    			<c:choose> 

				     <c:when test="${ item.occupy == '空余座位' }">    
						<div onclick='buyTicket("${item.id}")' class='seat'>${item.seat }</div>
					 </c:when>      
					 
					 <c:when test="${ item.occupy == '售出座位' }">    
						<div class='seat2'>${item.seat }</div>
					 </c:when>
				
				</c:choose>
    			 
    			
    		</c:forEach>
    		
    	</div>

    </div>
  </div>
<script src="jquery.js"></script>
 <script>
 	
 	function buyTicket(id){
 		
 		
 		if(!"${sessionScope.currentUser}"){
 			alert('请先登录！');
 			return;
 		}
 		
 		if(!confirm('您确定要订票吗？')){
 			return;
 		}
 		
 		$.post('/movie/addOrder.do',{id:id},function(data){
 			if(data.code < 0){
 				alert('系统出错了！');
 				return;
 			}
 			alert('订票成功！');
 			window.location.reload();
 		},'json')
 	}
 	
 	function showSeats(){
 		var html = document.getElementById('seats').innerHTML;
 		if(!html.trim()){
 			document.getElementById('seats').innerHTML = "<h2 style='color:red'>该电影暂无电影票出售</h2>";
 		}
 	}
 	
 	showSeats();
 
 </script>
 

    </div>
  </div>
</div>

    </div>

<%@include file="./common/footer.jsp" %>

 
</body></html>